<template>
  <div class="index">
    <!-- 搜索 -->
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action @focus="focus" background="#8ddbff" />
    </div>
    <!-- 轮播 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in swipeimg" :key="index">
          <img :src="image.img" style="width: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 各种类型 -->
    <div style="margin-top: 10px; font-size: 16px">
      <!-- 各种类型 -->
      <van-grid :column-num="4">
        <van-grid-item>
          <van-image :src="images[0].img" />
          <span>分类</span>
        </van-grid-item>
        <van-grid-item @click="onClick">
          <van-image :src="images[1].img" />
          <span>书架</span>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="images[2].img" />
          <span>男生</span>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="images[3].img" />
          <span>女生</span>
        </van-grid-item>
      </van-grid>
      <!-- 书架 -->
      <div>
        <van-popup v-model="show" position="bottom" :style="{ width: '100%', height: '60%' }">
          <p class="mybooks">我的书架</p>
          <div v-for="book in showbookDatas" :key="book.id">
            <van-swipe-cell>
              <!-- <van-card :price="+book.read_history" :desc="book.book_name" :title="book.writer" class="goods-card" :thumb="book.book_cover" @click="readbook(book.read_history, book.id)" /> -->
              <div class="books" @click="readbook(book.read_history, book.id)">
                <div>
                  <img :src="book.book_cover" alt="" style="width: 80px" />
                </div>
                <div style="margin-left: 20px">
                  <p>
                    <span>{{ book.book_name }} </span>
                  </p>
                  <p>{{ book.writer }}</p>
                  <p>读至第{{ book.read_history }}章</p>
                </div>
              </div>
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="deletebook(book.id, book.read_history)" />
              </template>
            </van-swipe-cell>
          </div>
        </van-popup>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="remen">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 热门推荐 </van-divider>
      <!-- 消息提示 -->
      <van-notice-bar left-icon="volume-o" :scrollable="false" color="#1989fa" background="#ecf9ff">
        <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item>好好读书，天天向上</van-swipe-item>
          <van-swipe-item>摸卿！摸卿！摸卿！</van-swipe-item>
          <van-swipe-item>抹茶最好喝！</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <!-- 刷新 -->
      <div class="shuaxin" @click="shuaxin">
        <img :src="images[4].img" alt="" style="width: 15px" />
        <span>刷新更多推荐</span>
      </div>
      <!-- 推荐书籍 -->
      <div class="coverInfo">
        <ul v-for="boks in bookDatas" :key="boks.id">
          <li class="itemInCovers" @click="bookDetail(boks.id)">
            <img :src="boks.book_cover" alt="" style="width: 60px" />
            <p>{{ boks.book_name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 分类 -->
    <div class="remen">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 分类 </van-divider>
      <van-tabs v-model="active">
        <div v-for="cates in catebook" :key="cates.id">
          <van-tab :title="cates.name">
            <div v-for="bookca in bookcas" :key="bookca.id">
              <van-card :desc="bookca.writer" :title="bookca.book_name" :thumb="bookca.book_cover" v-if="cates.name == bookca.category_name" @click="bookDetail(bookca.id)" />
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Card } from 'vant'
import { NoticeBar } from 'vant'
import { Grid, GridItem, Toast } from 'vant'
import { Tab, Tabs } from 'vant'
import { Swipe, SwipeItem } from 'vant'
import { Popup } from 'vant'
import { SwipeCell } from 'vant'
import { Search } from 'vant'
import { Divider } from 'vant'

export default {
  name: 'book',
  data() {
    return {
      value: '',
      show: false,
      bookDatas: [],
      active: 0,
      showbookDatas: [],
      bookDates: [],
      catebook: [],
      bookcas: [],
      images: [
        { id: 1, img: require('@/assets/fenlei.png') },
        { id: 2, img: require('@/assets/shujia.png') },
        { id: 3, img: require('@/assets/nansheng.png') },
        { id: 4, img: require('@/assets/nvsheng.png') },
        { id: 5, img: require('@/assets/shuaxin.png') }
      ],
      swipeimg: [
        { id: 1, img: require('@/assets/book1.jpg') },
        { id: 2, img: require('@/assets/book2.jpg') },
        { id: 3, img: require('@/assets/book3.jpg') },
        { id: 4, img: require('@/assets/book4.jpg') }
      ]
    }
  },
  methods: {
    // 书架看书
    readbook(chapterID, id) {
      this.$router.push({
        path: `/read_book/${id}/${chapterID}`
      })
    },
    // 删除图书
    deletebook(ids, readhistory) {
      // console.log(ids + ',' + readhistory)
      // 删除数据
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/delete_book',
        data: {
          id_card: localStorage.getItem('id_card'),
          book_id: ids,
          read_history: readhistory
        }
      }).then((res) => {
        this.booksitem()
      })
    },
    // 书架
    booksitem() {
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/show_bookshelf',
        data: {
          username: localStorage.getItem('id_card')
        }
      }).then((res) => {
        console.log(res.data)

        if (res.data.code == 0) {
          Toast(res.data.msg)
          this.showbookDatas = []
          // return false
        } else {
          this.showbookDatas = res.data
        }
      })
    },

    // 查看书架
    onClick() {
      this.show = true
      this.booksitem()
    },
    // 查看书籍详情
    bookDetail(id) {
      this.$router.push({
        path: `/bookDetail/${id}`
      })
    },
    // 更多热门推荐
    shuaxin() {
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/recommend'
      }).then((res) => {
        this.bookDatas = res.data
        // console.log(res)
      })
    },
    focus() {
      this.$router.push('/book_search')
    }
  },

  mounted() {
    // 热门推荐
    this.shuaxin()

    // 书籍分类
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/category_book'
    }).then((res) => {
      this.catebook = res.data
      // console.log(res)
    })
    // 分类的书籍
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/book'
    }).then((res) => {
      // console.log(res)
      this.bookcas = res.data
    })
  },
  watch: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  background-color: rgb(231, 231, 231);
}
.showbook {
  display: flex;
  margin: 10px 20px;
}
.mybooks {
  margin: 5% auto;
  border-radius: 5%;
  width: 80px;
  text-align: center;
  background-color: red;
  color: white;
  font-size: 16px;
}
.booksize {
  color: black;
  font-size: 13px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.goods-card {
  margin: 0;
  /* background-color: @white; */
}

.delete-button {
  height: 100%;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.coverInfo {
  display: flex;
  overflow-x: scroll;
  font-size: 8px;
}
.coverInfo ul {
  list-style: none;
  display: -webkit-box;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.itemInCovers {
  margin: 5px 10px;
}
.coverInfo::-webkit-scrollbar {
  display: none;
}
.shuaxin {
  display: flex;
  align-content: center;
  color: #39a9ed;
  justify-content: flex-end;
  margin: 4px;
  font-size: 6px;
}
.remen {
  background-color: #fff;
}
.books {
  display: flex;
}
</style>
